<template>
	<view class="page">
		<view class="image-list">
			<view class="image-item" v-for="(item,index) in array" :key="index">
				<view class="image-content" style="display: flex;">
					<image style="border-radius:5px; width: 80px; height: 80px; background-color: #eeeeee;" :mode="item.mode" :src="src"></image>
					<view class="name">
						<navigator url="/pages/navigator/login">
							<text style="font: 1.6em sans-serif;"> 未登录</text>
						</navigator>
						<text style="padding-left: 20px; font: 1em sans-serif;"> \n小屋号：787878</text>
					</view>
				</view>
			<view class="image-title">{{item.text}}</view>
			</view>
		</view>
		<view style="padding-top: 20%;">
			<navigator url="/pages/navigator/friend">
				<button style="background-color:aliceblue;">好友</button>
			</navigator>
		</view>
		<view>
			<navigator url="/pages/navigator/collect">
				<button style="background-color:aliceblue;">收藏</button>
			</navigator>
		</view>
		<view>
			<navigator url="/pages/navigator/setting">
				<button style="background-color:aliceblue;">设置</button>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				array: [{
						/*mode: 'scaleToFill',
						text: 'scaleToFill：不保持纵横比缩放图片，使图片完全适应'
					}, {
						mode: 'aspectFit',
						text: 'aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来'
					}, {
						mode: 'aspectFill',
						text: 'aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来'
					}, {
						mode: 'top',
						text: 'top：不缩放图片，只显示图片的顶部区域'
					}, {
						mode: 'bottom',
						text: 'bottom：不缩放图片，只显示图片的底部区域'
					}, {
						mode: 'center',
						text: 'center：不缩放图片，只显示图片的中间区域'
					}, {
						mode: 'left',
						text: 'left：不缩放图片，只显示图片的左边区域'
					}, {
						mode: 'right',
						text: 'right：不缩放图片，只显示图片的右边边区域'
					}, {
						mode: 'top left',
						text: 'top left：不缩放图片，只显示图片的左上边区域'
					}, {
						mode: 'top right',
						text: 'top right：不缩放图片，只显示图片的右上边区域'
					}, {
						mode: 'bottom left',
						text: 'bottom left：不缩放图片，只显示图片的左下边区域'
					}, {
						mode: 'bottom right',
						text: 'bottom right：不缩放图片，只显示图片的右下边区域'*/
					}],
					src: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/6acec660-4f31-11eb-a16f-5b3e54966275.jpg'
				}
			},
			methods: {
				imageError: function(e) {
					console.error('image发生error事件，携带值为' + e.detail.errMsg)
			}
		},
	}
</script>

<style lang="scss">
	.image-list{
		padding: 20px;
	}
	.image-content{
		.name{
			padding-left: 30px;
			height: 85px;
			width: 200px;
		}
	}
</style>
